<template>
    <div>
        <!-- 点击新增显示隐藏 -->
        <!-- 添加表单的close事件 -->
        <el-dialog :title="form.id>0?'编辑':'添加'" :visible.sync="info.isShow" @close="reset">
            <!-- 添加rules获取表单验证,通过validate去验证 -->
            <el-form ref="add" :model="form" :rules="rules">
                <el-form-item label="上级菜单" label-width="120px" prop="pid">
                    <el-select @change="choose" v-model="form.pid" placeholder="点击选择上级菜单">
                        <el-option label="顶级菜单" :value="0"> </el-option>
                        <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="菜单类型" label-width="120px" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1">目录（一级菜单）</el-radio>
                        <el-radio :label="2">菜单（二级菜单）</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单标题" label-width="120px" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 选择菜单图标菜单地址显示对应条列 -->
                <el-form-item v-if="form.type == 1" label="菜单图标" label-width="120px">
                    <el-input v-model="form.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-if="form.type == 2" label="菜单地址" label-width="120px">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="菜单状态" label-width="120px" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="3">正常</el-radio>
                        <el-radio :label="6">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
// 引入
import { mapState, mapActions } from 'vuex';


export default {
    props: ["info"],
    computed: {
        ...mapState("menu", ["menulist"])
    },
    mounted() {
        // 调用
        this.getmenulist()
    },
    data() {
        return {
            menus: [],
            form: {
                id:0,
                pid: "",
                type: "",
                title: "",
                icon: "",
                url: "",
                status: ""
            },
            rules: {
                pid: {
                    required: true, message: "请选择上级菜单", trigger: "blur"
                },
                title: { required: true, message: "请输入菜单标题", trigger: "blur" },
                type: { required: true, message: "请选择菜单类型", trigger: "blur" },
                status: { required: true, message: "请选择菜单状态", trigger: "blur" }
            }
        };
    },
    methods: {
        ...mapActions("menu", ["getmenulist"]),

        // 选择的是哪一个菜单
        choose(val) {
            console.log(val, 111111111);
            if (val == 0) {
                this.form.type = 1
            } else {
                this.form.type = 2
            }
        },
        reset() {
            this.info.isShow = false
            console.log("取消");
            // 清空表单信息
            this.form = {
                pid: "", type: "", title: "", icon: "", url: "", status: ""
            }
            // 使用表单的属性resetFields清空提示信息
            this.$refs.add.resetFields()
        },
        submit() {
            this.$refs.add.validate((value) => {
                if (value) {
                    // 判断接口是哪一个
                    let url = this.form.id>0?"menuedit":"menuadd"
                    // 测试接口是哪个
                    console.log(url);
                    console.log("通过了验证");
                    this.$Api.menuaddabc(url,this.form).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 调用列表进行更新
                            this.getmenulist()
                            this.reset()
                            console.log("确认");
                            // this.res.data
                        }
                    })
                    return
                }
                console.log(1111);
            })
        },
        setInfo(add){
            this.form = {
                ...add
            }
        }
    }
};
</script>
  
<style  scoped>

</style>
  